<template>

    <div>

        <h2>优惠券</h2>

        <div class="container">

            <div style="margin-bottom: 20px;">
                <el-button type="default" @click="add">添加优惠券</el-button>
            </div>

            <el-row :gutter="20">
                <el-col :xs="24" :sm="12" :md="24" :lg-span="24" :xl="24" v-for="item in items" :key="item.id">
                    <el-card class="box-card"
                             style="margin-top: 10px;">
                        <div slot="header" class="clearfix">
                            <span>(ID:{{item.id}}){{item.title}}</span>
                            <span v-if="item.can_receive" class="my-tag">可手动领取</span>

                            <p style="float: right; padding: 0; margin: 0">
                                <el-button size="small"  type="default" @click="edit(item)">修改</el-button>
                                <el-button size="small" type="danger" @click="remove(item.id)">删除</el-button>
                            </p>

                        </div>
                        <div class="text">
                            <template v-if="item.type == 1">
                                <el-tag style="line-height: 32px; height: 32px;">金额：￥{{item.amount}}  <span v-if="item.min_amount > 0">满{{item.min_amount}}元可用</span></el-tag>
                            </template>
                            <template v-else>
                                <el-tag v-if="item.recharge">充值套餐特权：{{item.recharge.title}}</el-tag>
                            </template>
                            <el-tag type="danger" v-if="item.expire_type == 1">有效期：<span>领取后{{item.expire_days}}天</span></el-tag>
                            <el-tag v-if="item.expire_type == 2">有效期：
                                {{item.started_at}} - {{item.finished_at}}</el-tag>

                            <el-tag v-if="item.only_recharge == 1" style="line-height: 32px; height: 32px;">仅限套餐充值</el-tag>
                            <el-tag v-if="item.only_recharge == 0" style="line-height: 32px; height: 32px;">不限直充或套餐</el-tag>
                            <el-tag type="warning"><span>超过{{item.months}}个月套餐可用</span></el-tag>
                        </div>
                    </el-card>
                </el-col>
            </el-row>

        </div>

        <el-dialog
                title="表单"
                :visible.sync="dialogVisible"
                width="50%"
                :close-on-click-modal="false"
        >
            <el-form ref="form" :model="form" label-width="160px">

                <el-form-item label="标题">
                    <el-input v-model="form.title"></el-input>
                </el-form-item>
                <!--<el-form-item label="类型">
                    <template>
                        <el-radio v-model="form.type" :label="1">代金券</el-radio>
                        <el-radio v-model="form.type" :label="2">特权券</el-radio>
                    </template>
                    <template v-else>
                        <span>{{form.type_name}}</span>
                    </template>
                </el-form-item>-->
                <el-form-item label="发放业务范围">
                    <el-select v-model="form.channel" placeholder="请选择">
                        <el-option key="all" value="all" label="全品类可以"></el-option>
                        <el-option key="oil_recharge" value="oil_recharge" label="仅加油充值"></el-option>
                        <el-option key="mobile_recharge" value="mobile_recharge" label="仅话费充值"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="金额" v-if="form.type == 1">
                    <el-input v-model="form.amount"><template slot="append">元</template></el-input>
                </el-form-item>
                <el-form-item label="满多少可用">
                    <el-input v-model="form.min_amount"><template slot="append">元</template></el-input>
                </el-form-item>
                <el-form-item label="满几月可用">
                    <el-input v-model="form.months"><template slot="append">月</template></el-input>
                </el-form-item>
                <!--<el-form-item label="可充值套餐" v-if="form.type == 2">
                    <el-select v-model="form.recharge_id" placeholder="请选择">
                        <el-option
                                v-for="item in recharge"
                                v-if="item.only_first == 1"
                                :key="item.id"
                                :label="item.title"
                                :value="item.id">
                        </el-option>
                    </el-select>
                </el-form-item>-->
                <el-form-item label="有效期" v-if="form.id === undefined">
                    <template>
                        <el-radio v-model="form.expire_type" :label="1">领取后n天</el-radio>
                        <el-radio v-model="form.expire_type" :label="2">固定时间段</el-radio>
                    </template>
                </el-form-item>
                <el-form-item label="可用有效天数" v-if="form.expire_type == 1">
                    <el-input v-model="form.expire_days">
                        <template slot="prepend">领取后</template>
                        <template slot="append">天内有效</template>
                    </el-input>
                </el-form-item>
                <el-form-item label="可用有效时间段" v-if="form.expire_type == 2">
                    <el-date-picker
                            v-model="form.expire_time"
                            value-format="yyyy-MM-dd HH:mm:ss"
                            type="datetimerange"
                            range-separator="至"
                            start-placeholder="开始日期"
                            end-placeholder="结束日期">
                    </el-date-picker>
                </el-form-item>
                <!--<el-form-item label="可否手动领取">
                    <el-switch
                            v-model="form.can_receive"
                            active-color="#13ce66"
                            inactive-color="#999"
                            :active-value="1"
                            :inactive-value="0">
                    </el-switch>
                </el-form-item>-->
                <el-form-item label="仅限套餐充值">
                    <el-switch
                            v-model="form.only_recharge"
                            active-color="#13ce66"
                            inactive-color="#999"
                            :active-value="1"
                            :inactive-value="0"
                    >
                    </el-switch>
                </el-form-item>
                <el-form-item label="发放总数" v-if="form.can_receive">
                    <el-input v-model="form.total_limit"><template slot="append">张</template></el-input>
                </el-form-item>
                <el-form-item label="每人限领"  v-if="form.can_receive">
                    <el-input v-model="form.once_limit"><template slot="append">张</template></el-input>
                </el-form-item>


            </el-form>


            <div style="text-align: center">
                <el-button @click="dialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="save">确 定</el-button>
            </div>
        </el-dialog>

    </div>

</template>
<style>
    .my-tag {
        background-color: rgba(64,158,255,.1);
        padding: 5px 10px;
        font-size: 14px;
        color: #409EFF;
        border-radius: 4px;
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
        border: 1px solid rgba(64,158,255,.2);
        margin: 0;
    }
</style>
<script>
    export default {
      data() {
        return {
          recharge: recharge,
          items: [],
          loading: true,
          params: {
            //
          },
          form: {
            type: 1
          },
          dialogVisible: false,
        }
      },
      created() {
        this.fetch();
      },
      methods: {
        fetch() {
          axios.get('/admin/api/coupon', {params: this.params}).then((res) => {
            if (res.data.code === 0) {
              this.items = res.data.data.items;
            } else {
              this.$message(res.data.msg);
            }
            this.loading = false;
          }).catch((err) => {
            console.log(err);
            this.$message('系统错误');
            this.loading = false;
          })
        },

        remove(id) {
          this.$confirm('确定要删除吗？', '确认信息', {
            distinguishCancelAndClose: true,
            confirmButtonText: '确定',
            cancelButtonText: '取消'
          })
            .then(() => {
                this.destroy(id);
            })
            .catch(action => {

            });
        },

        add() {
           this.dialogVisible = true;
           this.form = {
             type: 1
           };
        },

        save() {
          if (this.form.id !== undefined) {
            this.update();
          } else {
            this.store();
          }
        },

        store() {
          if (this.form.expire_time && this.form.expire_time.length === 2) {
            this.form.started_at = this.form.expire_time[0];
            this.form.finished_at = this.form.expire_time[1];
          }
          axios.post('/admin/api/coupon', this.form).then((res) => {
            if (res.data.code === 0) {
              this.dialogVisible = false;
              this.fetch();
            } else {
              this.$message(res.data.msg);
            }
            this.loading = false;
          }).catch((err) => {
            this.$message('系统错误');
            this.loading = false;
          })
        },

        update() {
          if (this.form.expire_time.length === 2) {
            this.form.started_at = this.form.expire_time[0];
            this.form.finished_at = this.form.expire_time[1];
          }
          axios.put('/admin/api/coupon/' + this.form.id, this.form).then((res) => {
            if (res.data.code === 0) {
              this.dialogVisible = false;
              this.fetch();
            } else {
              this.$message(res.data.msg);
            }
            this.loading = false;
          }).catch((err) => {
            this.$message('系统错误');
            this.loading = false;
          })
        },

        edit(item) {
          this.dialogVisible = true;
          this.form = Object.assign({}, item);
          this.form.expire_time = [
            this.form.started_at,
            this.form.finished_at
          ];
        },

        destroy(id) {
          axios.delete('/admin/api/coupon/' + id).then((res) => {
            if (res.data.code === 0) {
              this.fetch();
              this.$message.success('删除成功');
            } else {
              this.$message(res.data.msg);
            }
            this.loading = false;
          }).catch((err) => {
            this.$message('系统错误');
            this.loading = false;
          });

        }

      }
    }
</script>